<template>
  <!--  配置版本管理-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.name" clearable placeholder="请输入公司名称">
        <template slot="prepend">公司名称</template>
      </el-input>

      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" slot="reference" class="common_btn-small" @click="addSupplier">新增客户公司</el-button>
      <!-- table -->
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="公司名称" min-width="180"></el-table-column>
        <el-table-column prop="area" show-overflow-tooltip label="公司地址" min-width="120">
          <template slot-scope="scope">
           {{scope.row.area}}-{{scope.row.address}}
          </template>
        </el-table-column>
        <el-table-column prop="concatUserName" label="法人" min-width="100"></el-table-column>
        <el-table-column prop="concatPhone" label="联系电话" min-width="80"></el-table-column>
        <el-table-column prop="bankName"  label="开户行" min-width="100"></el-table-column>
        <el-table-column prop="bankUserName" label="开户名" min-width="120"></el-table-column>
        <el-table-column prop="bankNo" label="银行账号" min-width="120"></el-table-column>
        <el-table-column prop="uniqueId" label="纳税人识别号" min-width="120"></el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleEdit(scope.row)">编辑</button>
            <button class="btn_add" @click="handleEdit(scope.row)">相关合同</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                     layout="sizes, prev, pager, next" :total="form.total">
      </el-pagination>
      <!--      新增货品-->
      <el-drawer
        :title="dialogTitle"
        :visible.sync="isShowAddDialog"
        direction="rtl"
        custom-class="demo-drawer"
        ref="drawer"
        size="50%">
        <div class="demo-drawer__content">
          <!-- 具体form表单 -->
          <el-form label-position="right" ref="supplier" label-suffix="：" :rules="rule" :model="supplier"
                   label-width="0px">
            <el-divider content-position="left">基本信息</el-divider>
            <div>
              <el-form-item prop="name">
                <el-input v-model="supplier.name" placeholder="请输入">
                  <template slot="prepend">公司名称</template>
                </el-input>
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item prop="concatUserName">
                    <el-input v-model="supplier.concatUserName" placeholder="请输入">
                      <template slot="prepend">法人</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="所属行政区" label-width="120px" prop="areaId">
                    <region-unit v-model="supplier.areaId" :key="supplier.areaId"></region-unit>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="concatPhone">
                    <el-input v-model="supplier.concatPhone" type="number" placeholder="请输入">
                      <template slot="prepend">联系电话</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="address">
                    <el-input v-model="supplier.address" placeholder="请输入">
                      <template slot="prepend">详细地址</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <el-divider content-position="left">开票信息</el-divider>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item prop="bankUserName">
                  <el-input v-model="supplier.bankUserName" placeholder="请输入">
                    <template slot="prepend">开户名</template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="bankName">
                  <el-input v-model="supplier.bankName" placeholder="请输入">
                    <template slot="prepend">开户行</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="bankNo">
                  <el-input v-model="supplier.bankNo" type="number" placeholder="请输入">
                    <template slot="prepend">银行账号</template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="uniqueId">
                  <el-input v-model="supplier.uniqueId" placeholder="请输入">
                    <template slot="prepend">纳税人识别号	</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="isShowAddDialog=false" type="info">取 消</el-button>
          <el-button type="primary" class=" common_btn-defalut" @click="validateAddForm">确 定</el-button>
        </div>
      </el-drawer>
    </div>
    <x-loading v-show="isLoading"></x-loading>
  </div>
</template>
<script>
import {
  getCompanyList,
  addOrUpdateCompany
} from '@/services/ERP/goods'
import RegionUnit from '@/components/region-unit'
import ItemMixins from "../item.mixins";
import XLoading from '@/components/animation/x-loading.vue'
// form表单校验规则
export default {
  components: { XLoading, RegionUnit},
  mixins: [ItemMixins],
  data() {
    return {
      form: {
        page: 1,
        pageSize: 10,
        companyType: '2,3',
        total: 0,
      },
      rule: {
        name: {required: true, message: '请输入公司名称'},
      },
      supplier: {},
      tableList: [],
      isShowAddDialog: false,
      isLoading: false,
    }
  },
  computed: {
    // 弹窗的title
    dialogTitle() {
      return this.supplier.id ? '编辑客户公司信息' : '新增客户公司信息'
    },
  },
  methods: {
    // 表单提交
    validateAddForm() {
      this.$refs.supplier.validate((valid) => {
        if (valid) {
          this.submitCompany()
        }
      })
    },
    async submitCompany() {
      let res = await addOrUpdateCompany(this.supplier)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.supplier.id ? '更新成功！' : '添加成功！'
        })
        this.isShowAddDialog = false
        //清除公司
        this.removeAllCompanyStorage()
        this.queryList()
      }
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    async queryList() {
      this.isLoading = true
      let res = await getCompanyList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
      this.isLoading = false
    },
    addSupplier() {
      this.isShowAddDialog = true
      this.supplier = {
        companyType: 2
      }
      this.$nextTick(() => {
        this.$refs.supplier.clearValidate()
      })
    },
    handleEdit(row) {
      this.isShowAddDialog = true
      this.supplier = JSON.parse(JSON.stringify(row))
      this.$nextTick(() => {
        this.$refs.supplier.clearValidate()
      })
    },
  },
  mounted() {
    this.queryList()
  },

}
</script>

<style lang="less" scoped>
  .el-divider__text {
    font-size: 20px;
  }
  /deep/ .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 30px 0;
  }
  /deep/ .el-input-group__prepend {
    border-right: 0;
    background: #2196f3;
    color: white;
  }
</style>
